<template>
  <!--表单组件-->
  <el-dialog :close-on-click-modal="false" :before-close="handleBeforeClose"
    :visible=true :title="title" min-width="800px">

    <el-form ref="form" :model="form" size="small" >
      <el-table :data="tableData">
        <el-table-column prop="parameter" label="训练参数" />
        <el-table-column label="地面">
          <template #default="scope">
              <el-input v-model="scope.row.jyqDm" type="number" />
            </template>
        </el-table-column>
        <el-table-column label="减压前(2500m)">
          <template #default="scope">
            <el-input  v-model="scope.row.jyq2500"  type="number" />
          </template>
        </el-table-column>
        <el-table-column label="减压瞬间(5500m)">
          <template #default="scope">
            <el-input  v-model="scope.row.jy5500"  type="number" />
          </template>
        </el-table-column>
        <el-table-column label="减压1分钟">
          <template #default="scope">
            <el-input  v-model="scope.row.jyh1m"  type="number" />
          </template>
        </el-table-column>
        <el-table-column label="减压后(2500m)">
          <template #default="scope">
            <el-input  v-model="scope.row.jyh2500"  type="number" />
          </template>
        </el-table-column>
        <el-table-column label="地面">
          <template #default="scope">
            <el-input v-model="scope.row.jyhDm"  type="number"/>
          </template>
        </el-table-column>
      </el-table>

      <el-form-item label="建议">
        <el-input type="textarea" v-model="form.jy" />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="8" >
          <el-form-item label="结果判定">
            <el-select
              style="width: 100%;"
              v-model="form.result"
              placeholder="请选择">
              <el-option
                v-for="[key, value] in resultOptions"
                :key="value"
                :label="value"
                :value="key"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item label="记录人" prop="createBy">
            <el-input v-model="form.createBy" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录日期" prop="createTime">
            <el-date-picker v-model="form.createTime" :picker-options="pickerOptions" type="datetime" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleCommit" :disabled="disabled">确认</el-button>
      </div>
  </el-dialog>
</template>

<script>
import {get, edit, add} from '@/api/trainDycxsjy'

import { RATE_RESULTS} from '@/utils/constants'
import { form2Table, table2Form } from '@/utils/table';

export default {
  name: 'DycxsjyDialog',
  props: {
    trainId: {
      type: Number,
      default: -1,
      required: true
    },
    itemId: {
      type: Number,
      default: -1,
      required: true
    }
  },
  computed: {
    disabled() {
      return this.form.id != null && !this.checkPer(['admin']);
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      tableData: [
        { parameter: '血氧饱和度%', jyqDm: "", jyq2500: "", jy5500: "", jyh2500: "", jyh1m: "", jyhDm: ""},
        { parameter: '心率(次/分)', jyqDm: "", jyq2500: "", jy5500: "", jyh2500: "", jyh1m: "", jyhDm: ""},
        { parameter: '呼吸(次/分)', jyqDm: "", jyq2500: "", jy5500: "", jyh2500: "", jyh1m: "", jyhDm: ""},
        { parameter: '血压(mmHg)', jyqDm: "", jyq2500: "", jy5500: "", jyh2500: "", jyh1m: "", jyhDm: ""},
      ],
      form: { id: null, trainId: null, jyqDm: null, jyq2500: null, jy5500: null, jyh2500: null, jyh1m: null, 
        jyhDm: null, result: null, jy: null, date: null, createBy: null, trainItemId: null },
      title: '低压舱迅速减压',
      // rules: {
      //   createBy: [{ required: true, message: '记录人不能为空', trigger: 'blur' }],
      //   date: [{ required: true, message: '记录日期不能为空', trigger: 'blur' }]
      // },
      resultOptions: RATE_RESULTS,
      isLoading: false // 提交按钮的加载状态
    };
  },
  methods: {
    emit: function(event) {

    },
    handleBeforeClose(done) {
      this.$emit('close', this.itemId);
      if (done) {
        done();
      }
    },
    handleCommit() {
      table2Form(this.tableData, this.form, 'jy')
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return;
        }

        this.isLoading = true; // 提交按钮的加载状态
        this.form.trainId = this.trainId;
        this.form.trainItemId = this.itemId;
        if (this.form.id == null) {
          add(this.form).then(() => {
            this.$emit('close', this.itemId);
            this.isLoading = false;
          }).catch(() => {
            this.isLoading = false;
          });
        } else {
          edit(this.form).then(() => {
            this.$emit('close', this.itemId);
            this.isLoading = false;
          }).catch(() => {
            this.isLoading = false;
          });
        }
        
      })
    },
    handleCancel() {
      this.$emit('cancel', this.itemId);
    }
  },
  created() {
    if (this.trainId !== -1) {
      this.shouldUpdate = false;

      get(this.trainId, this.itemId).then(response => {
        this.form = Object.assign(this.form, response);
        form2Table(this.form, this.tableData)

      });
    }
  },
  mounted() {
  }
}
</script>

<style scoped>


</style>